<template>
	<view>
		<view class="search xflex-x-between">
			<image class="img" src="../../static/image/search.png" mode=""></image>
			<input type="text" class="ipt xflex1" :focus="props.focus" :disabled="props.disabled" v-model="text" :placeholder="props.placeholder">
			<view class="btn" @click="search()">
				搜索
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
	import {ref,reactive,defineProps, watchEffect,defineEmits} from "vue"
	let text = ref("")
	
	const props = defineProps({
		placeholder:{
			default:'请输入'
		},
		disabled:{
			default:false
		},
		focus:{
			default:false
		}
	})
	const emits = defineEmits(['search'])
	
	
	const search = ()=>{
		emits("search",text.value)
	}
	
	
</script>

<style lang="scss" scoped>
.search {
	// width: 686rpx;
	height: 72rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1);
	border-radius: 36rpx;
}
.img {
	width: 22rpx;
	height: 22rpx;
	margin-left: 36rpx;
}
.btn {
	width: 100rpx;
	height: 60rpx;
	background: #5CC745;
	border-radius: 30rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 60rpx;
	text-align: center;
	margin: 7rpx 3rpx 5rpx 0;
}
.ipt {
	width: 216rpx;
	height: 33rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #909090;
	line-height: 33rpx;
	text-align: left;
	margin-left: 21rpx;
}
</style>